<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>注册</title>
		<style>
			.title_date{
	  	text-align: center;
	  	font-size: 1rem;
	  	color:#88C2FE ;
	  	}
  .title-form{
    width: 90%;
    margin: 0 auto;
    position: absolute;;
    top:2rem;
    left:0;
    right:0;
    background: #fff;
    border-radius: 5px;
    position: relative;
    top: 0;
    padding-bottom: 0.5rem;
  }
  .title-form-div{
    width: 100%;
    height: 80%;
    position: relative;
    top: 0rem;
  }
  .title-div{
    width: 90%;
    height: 1rem;
    margin: 0.5rem auto;
    background: #f3f8fe;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .title-div i{
    font-size: 0.5rem;
    line-height: 1rem;
    color: #ffc514;
    padding-left: 0.2rem;
    float: left;
  }
  .title-div span{
    width: 80%;
    display: inline-block;
    height: 1rem;
    float: left;
  }
  .title-div input{
    height: 0.5rem;
    margin: 0.25rem 0.1rem;
    width: 90%;
    background: #f3f8fe;
    line-height: 0.4rem;
    font-size: 0.36rem;
    padding-left: 0.1rem;
    border-radius: 0.5rem;
  }
  .title-span-button{
    width: 38%;
    text-align: center;
    line-height: 1rem;
    background: #4293f2;
    color:#fff;
  }
  .title-xieyi{
    width: 90%;
    height: 0.8rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.1rem;
    padding-left: 0.3rem;
    line-height: 0.8rem;
  }
  .title-submit{
    width: 90%;
    height: 1rem;
    background: #4293f2;
    margin: 0.5rem auto;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    border-radius: 0.15rem;
    font-size: 0.45rem;
  }
  .title-fonts{
    width: 80%;
    /*height: 5*/
    0px;
    margin: 0 auto;
  }
  .lt{
    float: left;
  }
  .rt{
    float: right;
  }
  .icon-herd-img{
    width: 24%;
    height: 85px;
    margin: 0 39%;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
  }
  </style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
					<div class="public-header-title">注册</div>
				</header>
				<div style="height:2rem;width:100%;background:#4293f2;"></div>
			</div>
			<div class="" style="height:12rem;width:100%;position:absolute;top:2rem;">
				<div class="title-form" style="-moz-box-shadow:4px 4px 20px #f4f9fe; -webkit-box-shadow:4px 4px 20px #f4f9fe; box-shadow:4px 4px 20px #f4f9fe;">
					<div style="background:#fff;width:90%;height:auto;margin:0 auto 0;border-radius:0.25rem;">
						<div style="width:70%;padding:0.1rem;margin:auto;">
							<!-- <img src="../../image/public/cjyl.png" alt="" style="margin-top:0.2rem;"> -->
						</div>
					</div>
					<div class="title-form-div">
						<h1 class="title_date">
							趣引流
						</h1>
						<div class="title-div">
							<div class="" style="width:25px;height:1rem;float:left;line-height:1rem;margin-left:0.22rem;margin-top:0.15rem;">
								<img src="../../image/public/user.png" alt="">
							</div>
							<span>
								<input type="text" v-model="phone" placeholder="请输入手机号">
							</span>
						</div>
						<div class="title-div">
							<div class="" style="width:25px;height:1rem;float:left;line-height:1rem;margin-left:0.22rem;margin-top:0.15rem;">
								<img src="../../image/public/code.png" alt="">
							</div>
							<span class="title-span" style="width:48%;">
								<input type="text" v-model="code" placeholder="请输入验证码">
							</span>
							<span class="title-span-button" style="width:30%;float:right !important;display:none;font-size: 0.25rem;" v-show="!showCode"
							 @click="getCode">获取验证码</span>
							<span class="title-span-button" style="width:30%;float:right !important;display:block;font-size: 0.25rem;"
							 v-show="showCode">{{time}}秒后再次获取</span>
						</div>
						<div class="title-div">
							<div class="" style="width:25px;height:1rem;float:left;line-height:1rem;margin-left:0.22rem;margin-top:0.15rem;">
								<img src="../../image/public/pwd.png" alt="">
							</div>
							<span>
								<input type="password" v-model="pwd" placeholder="请输入密码">
							</span>
						</div>
						<div class="title-div" style="margin-bottom:0;">
							<div class="" style="width:25px;height:1rem;float:left;line-height:1rem;margin-left:0.22rem;margin-top:0.15rem;">
								<img src="../../image/public/pwd.png" alt="">
							</div>
							<span>
								<input type="password" v-model="pwds" placeholder="请再次确认密码">
							</span>
						</div>
					</div>
				</div>
				<div class="title-submit" @click="register">注册</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		var mySwiper;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['50', '100', '200', '300', '500', '1000'],
					num: 0,
					list: '',
					phone: '13000000000',
					code: '',
					pwd: '',
					pwds: '',
					time: 60,
					showCode: false,
					tongyi: 1,
					canvate: false,
					banner: ["../../image/tg/tg1.jpg", "../../image/tg/tg2.jpg", "../../image/tg/tg3.jpg"]
				},
				created: function() {},
				methods: {
					// 发送验证码
					getCode: function() {
						if (vm.canvate) {
							return
						};
						if (vm.phone == "") {
							api.toast({
								msg: '请输入您的手机号',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (!(/^1\d{10}$/.test(vm.phone))) {
							api.toast({
								msg: '手机号格式错误',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						vm.canvate = true;
						console.log(vm.phone);
						api.ajax({
							url: apiUrl + '/api/user/sendVerify',
							method: 'post',
							data: {
								values: {
									mobile: vm.phone,
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							setTimeout(function() {
								vm.canvate = false;
							}, 1000)
							if (ret.code==1) { 
								timeOut();
								vm.showCode = true;
								msg('发送成功');
							} else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});
					},
					register: function() {
						if (vm.phone == "") {
							api.toast({
								msg: '请输入您的手机号',
								duration: 2000,
								location: 'middle'
							});
							return;
						}

						if (!(/^1\d{10}$/.test(vm.phone))) {
							api.toast({
								msg: '手机号格式错误',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.code == "") {
							api.toast({
								msg: '请输入验证码',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.pwd == "") {
							api.toast({
								msg: '请输入密码',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.pwds == "") {
							api.toast({
								msg: '请再次确认密码',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						if (vm.pwd !== vm.pwds) {
							api.toast({
								msg: '两次输入的密码不一致',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						api.ajax({
							url: apiUrl + '/api/user/register',
							method: 'post',
							data: {
								values: {
									mobile: vm.phone,
									password: vm.pwd,
									code: vm.code,
								}
							},
						}, function(ret, err) {
							if (ret.code == 1) {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
								setTimeout(function() {
									api.openWin({
										name: 'login',
										reload: true,
										url: './login.html',
									});
								}, 500);
							} else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});

					}
				}
			})
		}

		function timeOut() {
			setTimeout(function() {
				vm.time--;
				if (vm.time <= 0) {
					vm.showCode = false;
					vm.time = 60;
					return;
				}
				timeOut();
			}, 1000);
		}
	</script>
</html>
